<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore, UserType } from '@/stores/userStore'
import { User, Lock, UserFilled } from '@element-plus/icons-vue'

// 引入用户存储
const userStore = useUserStore()
const router = useRouter()

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: '',
  userType: UserType.REGULAR
})

// 注册表单数据
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  userType: UserType.REGULAR,
  name: '',
  email: ''
})

// 是否显示注册表单
const showRegister = ref(false)

// 表单验证规则
const loginRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度应为3-20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule: any, value: string, callback: any) => {
        if (value !== registerForm.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ]
}

// 表单引用
const loginFormRef = ref()
const registerFormRef = ref()

// 登录方法
const handleLogin = async () => {
  if (!loginFormRef.value) return

  await loginFormRef.value.validate((valid: boolean) => {
    if (valid) {
      const success = userStore.login(loginForm.username, loginForm.password)

      if (success) {
        ElMessage.success('登录成功')
        router.push('/')
      } else {
        ElMessage.error('用户名或密码错误')
      }
    }
  })
}

// 注册方法
const handleRegister = async () => {
  if (!registerFormRef.value) return

  await registerFormRef.value.validate((valid: boolean) => {
    if (valid) {
      // 管理员不能注册
      if (registerForm.userType === UserType.ADMIN) {
        ElMessage.error('不能注册管理员账号')
        return
      }

      const success = userStore.register(
        registerForm.username,
        registerForm.password,
        registerForm.userType,
        registerForm.name,
        registerForm.email
      )

      if (success) {
        ElMessage.success('注册成功')
        router.push('/')
      } else {
        ElMessage.error('用户名已存在')
      }
    }
  })
}

// 切换到注册表单
const toggleRegister = (show: boolean) => {
  showRegister.value = show
}

// 填充测试账号
const fillTestAccount = (username: string, password: string, userType: UserType) => {
  loginForm.username = username
  loginForm.password = password
  loginForm.userType = userType
}

// 用户类型选项
const userTypeOptions = computed(() => {
  return [
    { label: '普通用户', value: UserType.REGULAR }
  ]
})

// 随机生成树叶位置
const leaves = Array.from({ length: 10 }, (_, i) => ({
  id: i,
  left: `${Math.random() * 100}%`,
  top: `${Math.random() * 100}%`,
  size: 20 + Math.random() * 30,
  rotation: Math.random() * 360,
  delay: Math.random() * 5
}))
</script>

<template>
  <div class="login-container">
    <!-- 背景动画 -->
    <div class="nature-bg">
      <!-- 青岛风筝元素 -->
      <div class="kite">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 4L19 11L12 18L5 11L12 4Z" fill="#f44336" stroke="#d32f2f" stroke-width="1"/>
          <path d="M12 8L14 10L12 12L10 10L12 8Z" fill="#fff" stroke="#d32f2f" stroke-width="0.5"/>
          <path d="M12 18V22" stroke="#d32f2f" stroke-width="1"/>
          <path d="M12 22L10 20M12 22L14 20" stroke="#d32f2f" stroke-width="1"/>
        </svg>
      </div>

      <!-- 树叶元素 -->
      <div
        v-for="leaf in leaves"
        :key="leaf.id"
        class="leaf"
        :style="{
          left: leaf.left,
          top: leaf.top,
          width: `${leaf.size}px`,
          height: `${leaf.size}px`,
          transform: `rotate(${leaf.rotation}deg)`,
          animationDelay: `${leaf.delay}s`
        }"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 5C19 3 16.5 2 14 2C11.5 2 9.80002 3 8.40002 4C7.39995 4.79998 6.09998 6.5 5.79998 8.5C5.59998 9.7 6.00002 11.3 6.70002 12.8C7.40002 14.3 8.49995 15.8 9.79995 16.9C10.8 17.8 12.3 18.6 13.8 18.9C15.3 19.2 16.8 19 17.8 18.5C19.5 17.7 20.6 16.2 21.3 14.8C22 13.4 22.2 12 22 10.8C21.7 8.9 20.5 7.5 19.7 6.7C18.9 5.9 17.4 5.3 15.7 5.2C14 5.1 12.5 5.5 11.3 6.2C10.1 6.9 9.29995 7.89998 8.79995 8.89998C8.29995 9.89998 8.09998 10.9 8.29998 11.7C8.49998 12.5 8.9 13.1 9.4 13.5C9.9 13.9 10.5 14.1 11.1 14.1C11.7 14.1 12.3 13.9 12.7 13.6C13.1 13.3 13.4 12.9 13.5 12.5C13.6 12.1 13.6 11.7 13.4 11.4C13.2 11.1 13 10.8 12.6 10.7C12.5 10.7 12.3 10.7 12.2 10.8C12.1 10.9 12 11 12 11.1C12 11.1 12 11.2 12.1 11.2C12.2 11.2 12.2 11.2 12.3 11.1C12.4 11 12.4 11 12.4 10.9C12.4 10.8 12.3 10.8 12.2 10.8C12.1 10.8 11.9 10.9 11.8 11C11.7 11.1 11.6 11.3 11.6 11.5C11.6 11.7 11.7 11.9 11.9 12.1C12.1 12.3 12.3 12.4 12.6 12.4C12.9 12.4 13.2 12.3 13.4 12.1C13.6 11.9 13.8 11.6 13.8 11.3C13.8 11 13.7 10.6 13.5 10.3C13.3 10 13 9.7 12.6 9.5C12.2 9.3 11.7 9.2 11.2 9.3C10.7 9.4 10.3 9.6 9.90002 9.9C9.50002 10.2 9.20001 10.7 9.00001 11.2C8.80001 11.7 8.70001 12.3 8.90001 12.9C9.10001 13.5 9.40002 14 9.90002 14.4C10.4 14.8 11 15.1 11.7 15.1C12.4 15.1 13.1 14.9 13.7 14.5C14.3 14.1 14.8 13.5 15.1 12.8C15.4 12.1 15.5 11.3 15.3 10.5C15.1 9.7 14.7 8.9 14 8.3C13.3 7.7 12.5 7.3 11.5 7.1C10.5 6.9 9.50002 7 8.60002 7.3C7.70002 7.6 6.90001 8.1 6.30001 8.7C5.70001 9.3 5.20001 10.1 5.00001 11C4.80001 11.9 4.90002 12.9 5.20002 13.8C5.50002 14.7 6.10001 15.5 6.80001 16.2C7.50001 16.9 8.40002 17.4 9.40002 17.7C10.4 18 11.5 18 12.5 17.8C13.5 17.6 14.4 17.2 15.2 16.6C16 16 16.7 15.3 17.1 14.4C17.5 13.5 17.8 12.5 17.7 11.5C17.6 10.5 17.3 9.5 16.7 8.7C16.1 7.9 15.3 7.3 14.4 6.9C13.5 6.5 12.5 6.3 11.5 6.4C10.5 6.5 9.60002 6.8 8.80002 7.3C8.00002 7.8 7.40001 8.5 7.00001 9.3C6.60001 10.1 6.40002 11 6.50002 11.9C6.60002 12.8 6.90001 13.7 7.50001 14.4C8.10001 15.1 8.80002 15.7 9.70002 16C10.6 16.3 11.5 16.4 12.4 16.2C13.3 16 14.1 15.6 14.8 15C15.5 14.4 16 13.6 16.3 12.8C16.6 12 16.7 11.1 16.5 10.2C16.3 9.3 15.9 8.5 15.3 7.9C14.7 7.3 14 6.8 13.1 6.6C12.2 6.4 11.3 6.4 10.5 6.7C9.70001 7 9.00001 7.5 8.50001 8.1C8.00001 8.7 7.70002 9.5 7.70002 10.3C7.70002 11.1 7.90001 11.9 8.30001 12.5C8.70001 13.1 9.30002 13.6 10 13.9C10.7 14.2 11.5 14.3 12.2 14.1C12.9 13.9 13.6 13.5 14.1 13C14.6 12.5 14.9 11.8 15 11.1C15.1 10.4 15 9.7 14.7 9.1C14.4 8.5 13.9 8 13.3 7.7C12.7 7.4 12 7.2 11.3 7.3C10.6 7.4 10 7.7 9.50001 8.1C9.00001 8.5 8.70002 9.1 8.60002 9.7C8.50002 10.3 8.60001 10.9 8.90001 11.4C9.20001 11.9 9.60002 12.3 10.1 12.5C10.6 12.7 11.2 12.8 11.7 12.6C12.2 12.4 12.7 12.1 13 11.7C13.3 11.3 13.5 10.8 13.4 10.3C13.3 9.8 13.1 9.4 12.8 9.1C12.5 8.8 12.1 8.6 11.6 8.5C11.1 8.4 10.7 8.5 10.3 8.7C9.90001 8.9 9.60002 9.2 9.40002 9.6C9.20002 10 9.10001 10.4 9.20001 10.8C9.30001 11.2 9.50002 11.5 9.80002 11.7C10.1 11.9 10.4 12 10.8 12C11.2 12 11.5 11.8 11.8 11.6C12.1 11.4 12.3 11.1 12.4 10.7C12.5 10.3 12.4 10 12.3 9.7C12.2 9.4 12 9.2 11.7 9C11.4 8.8 11.1 8.7 10.8 8.8C10.5 8.9 10.2 9 10 9.3C9.80002 9.6 9.70001 9.9 9.80001 10.2C9.90001 10.5 10 10.7 10.3 10.9" stroke="#2F9E44" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      <!-- 青岛山水元素 -->
      <div class="mountain"></div>
      <div class="river"></div>
      <div class="sun"></div>

      <!-- 青岛特色文字 -->
      <div class="weifang-text">
        <span>青岛</span>
        <span>生态</span>
        <span>保护</span>
      </div>
    </div>

    <div class="login-card">
      <div class="login-header">
        <div class="logo">
          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M17 14V2"></path>
            <path d="M9 18.12 3 14v-4l6-4.12a2 2 0 0 1 2 0l6 4.12a2 2 0 0 1 0 3.46l-6 4.12a2 2 0 0 1-2 0"></path>
            <path d="M12 22v-4"></path>
          </svg>
        </div>
        <h1>青岛自然保护区系统</h1>
        <p class="subtitle">山东省青岛市生态保护管理平台</p>
        <p>{{ showRegister ? '创建新账号' : '欢迎回来' }}</p>
      </div>

      <!-- 登录表单 -->
      <div v-if="!showRegister" class="form-container">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          label-position="top"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="用户名"
              :prefix-icon="User"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="密码"
              :prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <el-form-item>
            <el-radio-group v-model="loginForm.userType" class="user-type-group">
              <el-radio :label="UserType.ADMIN">管理员</el-radio>
              <el-radio :label="UserType.REGULAR">普通用户</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="submit-btn" @click="handleLogin">
              登录
            </el-button>
          </el-form-item>
        </el-form>

        <div class="form-footer">
          <p>
            还没有账号？
            <el-button link type="primary" @click="toggleRegister(true)">
              立即注册
            </el-button>
          </p>

          <div class="test-accounts">
            <div class="test-accounts-title">测试账号：</div>
            <div class="account-item">
              <span class="account-type">管理员：</span>
              <span class="account-info">admin / admin123</span>
              <el-button size="small" type="primary" link @click="fillTestAccount('admin', 'admin123', UserType.ADMIN)">填充</el-button>
            </div>
            <div class="account-item">
              <span class="account-type">普通用户：</span>
              <span class="account-info">需要注册</span>
              <el-button size="small" type="info" link @click="toggleRegister(true); registerForm.userType = UserType.REGULAR">注册</el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 注册表单 -->
      <div v-else class="form-container">
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="registerRules"
          label-position="top"
        >
          <el-form-item prop="username">
            <el-input
              v-model="registerForm.username"
              placeholder="用户名"
              :prefix-icon="User"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="registerForm.password"
              type="password"
              placeholder="密码"
              :prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <el-form-item prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              placeholder="确认密码"
              :prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <el-form-item prop="name">
            <el-input
              v-model="registerForm.name"
              placeholder="姓名"
              :prefix-icon="UserFilled"
            />
          </el-form-item>

          <el-form-item prop="email">
            <el-input
              v-model="registerForm.email"
              placeholder="邮箱"
            >
              <template #prefix>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect width="20" height="16" x="2" y="4" rx="2"></rect>
                  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
                </svg>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-radio-group v-model="registerForm.userType" class="user-type-group">
              <el-radio
                v-for="option in userTypeOptions"
                :key="option.value"
                :label="option.value"
              >
                {{ option.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="submit-btn" @click="handleRegister">
              注册
            </el-button>
          </el-form-item>
        </el-form>

        <div class="form-footer">
          <p>
            已有账号？
            <el-button link type="primary" @click="toggleRegister(false)">
              返回登录
            </el-button>
          </p>

          <div class="test-accounts">
            <div class="test-accounts-title">测试账号提示：</div>
            <div class="account-item">
              <span class="account-type">管理员：</span>
              <span class="account-info">不可注册，请使用默认账号</span>
              <el-button size="small" type="primary" link @click="toggleRegister(false)">返回登录</el-button>
            </div>
            <div class="account-item">
              <span class="account-type">普通用户：</span>
              <span class="account-info">请填写注册信息</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M30,50 Q50,30 70,50 T90,50" fill="none" stroke="rgba(46,125,50,0.1)" stroke-width="2"/></svg>');
    background-size: 200px 200px;
    opacity: 0.3;
    z-index: 0;
  }
}

.nature-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.leaf {
  position: absolute;
  opacity: 0.6;
  animation: float 15s infinite ease-in-out;
  z-index: 1;

  svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
  }
}

.mountain {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  clip-path: polygon(0 100%, 15% 65%, 25% 70%, 35% 55%, 45% 72%, 55% 48%, 65% 65%, 75% 45%, 85% 58%, 100% 30%, 100% 100%);
  z-index: 1;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg, rgba(46, 125, 50, 0) 0%, rgba(27, 94, 32, 0.8) 100%);
  }
}

.sun {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ffeb3b 0%, #ffc107 100%);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(255, 235, 59, 0.6);
  animation: pulse 5s infinite alternate;
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: radial-gradient(circle, rgba(255, 235, 59, 0.3) 0%, rgba(255, 193, 7, 0) 70%);
    border-radius: 50%;
    z-index: -1;
  }
}

.login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 450px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;

  .logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;

    svg {
      color: #2e7d32;
      animation: bounce 2s infinite alternate;
    }
  }

  h1 {
    font-size: 1.8rem;
    color: #2e7d32;
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .subtitle {
    color: #1b5e20;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
  }

  p {
    color: #666;
    font-size: 1rem;
  }
}

.form-container {
  margin-bottom: 1rem;
}

.user-type-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  border: none;
  font-weight: 600;
  transition: all 0.3s ease;

  &:hover {
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
  }
}

.form-footer {
  text-align: center;
  margin-top: 1rem;

  p {
    color: #666;
    font-size: 0.9rem;
  }

  .test-accounts {
    margin-top: 1.5rem;
    background-color: #f1f8e9;
    border-radius: 8px;
    padding: 1rem;
    text-align: left;
    border: 1px dashed #8bc34a;

    .test-accounts-title {
      font-weight: 600;
      color: #2e7d32;
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
      text-align: center;
    }

    .account-item {
      display: flex;
      align-items: center;
      margin-bottom: 0.5rem;
      padding: 0.5rem;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 0.7);

      &:last-child {
        margin-bottom: 0;
      }

      .account-type {
        font-weight: 600;
        color: #333;
        width: 80px;
        font-size: 0.85rem;
      }

      .account-info {
        flex: 1;
        color: #666;
        font-size: 0.85rem;
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(10deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(10px, -15px) rotate(5deg);
  }
  50% {
    transform: translate(20px, 0) rotate(0deg);
  }
  75% {
    transform: translate(10px, 15px) rotate(-5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

// 青岛风筝元素
.kite {
  position: absolute;
  top: 15%;
  right: 20%;
  width: 60px;
  height: 60px;
  z-index: 2;
  animation: fly 8s infinite ease-in-out;

  svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  }
}

// 青岛河流
.river {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background: linear-gradient(90deg, #81d4fa 0%, #4fc3f7 50%, #29b6f6 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 85% 20%, 70% 10%, 55% 30%, 40% 15%, 25% 25%, 10% 10%, 0 30%);
  opacity: 0.7;
  z-index: 2;
}

// 青岛特色文字
.weifang-text {
  position: absolute;
  bottom: 15%;
  right: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;

  span {
    font-size: 1.5rem;
    font-weight: bold;
    color: rgba(46, 125, 50, 0.7);
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
    writing-mode: vertical-rl;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .login-card {
    max-width: 90%;
    padding: 1.5rem;
  }

  .login-header h1 {
    font-size: 1.5rem;
  }

  .user-type-group {
    flex-direction: column;
    gap: 10px;
  }

  .kite {
    top: 10%;
    right: 10%;
    width: 40px;
    height: 40px;
  }

  .weifang-text {
    bottom: 20%;
    right: 2%;

    span {
      font-size: 1.2rem;
    }
  }
}
</style>
